<template>
  <a-modal
    :title="title"
    width="720px"
    :dialog-style="{ top: '20px' }"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleSubmit"
    @cancel="close"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="问题描述"
        >
          <a-input placeholder="请输入问题描述" v-decorator="[ 'problemDesc', {rules: [{ required: true, message: '请输入问题描述!' }]}]" />
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="处理方式"
        >
          <a-textarea placeholder="请输入处理方式" :rows="5" v-decorator="[ 'result', {rules: [{ required: false, message: '请输入处理方式!' }]}]" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { FormModalMixin } from '@/mixins/FormModalMixin'
import pick from 'lodash.pick'
import { apiQueryAfterSaleById, apiSaveAfterSale, apiUpdateAfterSale, apiProcessAfterSale } from '@/api/order'

export default {
  name: 'AfterSaleModal',
  mixins: [FormModalMixin],
  methods: {
    show (title, record) {
      console.log(record)
      this.resetFields()
      this.model = {}
      this.visible = true
      this.title = title
      if (record.orderId) {
        this.model.orderId = record.orderId
      }
      if (record.id) {
        apiQueryAfterSaleById(record.id).then(res => {
          this.model = Object.assign({}, res.data)
          // 是否为开始处理
          this.model.isProcess = record.isProcess
          this.$nextTick(() => {
            this.form.setFieldsValue(pick(this.model, 'problemDesc', 'result'))
          })
        })
      }
    },
    handleSubmit () {
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log(values)
          console.log(this.model)
          this.confirmLoading = false
          const formData = pick(Object.assign(this.model, values), 'orderId', 'problemDesc', 'result')
          let obj
          if (this.model.id && this.model.isProcess) {
            obj = apiProcessAfterSale(this.model.id, formData)
          } else if (this.model.id && !this.model.isProcess) {
            obj = apiUpdateAfterSale(this.model.id, formData)
          } else {
            obj = apiSaveAfterSale(formData)
          }
          obj.then(res => {
            if (res.code === 1) {
              this.$message.success(res.msg)
              this.$emit('ok', res.data)
              this.close()
            } else {
              this.$message.warning(res.msg)
            }
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
